<template>
  <view style="display: inline-flex; width: 100%">
    <view @click="selStart" style="width: 40%; text-align: center">{{
        defaultStartTime || placeholder[0]
      }}</view>
    <u-picker
      mode="time"
      :defaultTime="defaultStartTime"
      placeholder="开始时间"
      v-model="startShow"
      :params="params"
      @confirm="confirmStart"
      :confirm-color="confirmColor"
      :end-time="limitEndTime"
      v-bind="$props"
    >
    </u-picker>

    ~
    <view @click="selEnd" style="width: 40%; text-align: center">{{
        defaultEndTime || placeholder[1]
      }}</view>

    <u-picker
      mode="time"
      :defaultTime="defaultEndTime"
      v-model="endShow"
      :params="params"
      :start-time="limitStartTime"
      @confirm="confirmEnd"
      :confirm-color="confirmColor"
      v-bind="$props"
    ></u-picker>
  </view>
</template>
<script>
import mpConfig from '../../libs/mixin/mp-vertual-node.js';
import dayjs from 'dayjs';

export default {
  name: 'u-range-picker',
  options: mpConfig,
  emits: ['update:rangeValue'],
  props: {
    showToday: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: Array,
      default: () => ['开始时间', '结束时间'],
    },
    rangeValue: {
      type: Array,
      default: () => ['', ''],
    },
    params: {
      type: Object,
      default: () => ({
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      }),
    },
    // 年份开始时间
    startYear: {
      type: [String, Number],
      default: 1950,
    },
    // 年份结束时间
    endYear: {
      type: [String, Number],
      default: 2100,
    },
    // "取消"按钮的颜色
    cancelColor: {
      type: String,
      default: '#606266',
    },
    // "确定"按钮的颜色
    confirmColor: {
      type: String,
      default: '#2979ff',
    },
    //字体颜色
    fontColor: {
      type: String,
      default: '#303133',
    },
    // disabled
    disabled: {
      type: Boolean,
      default: false,
    },
    // 提示文字样式
    placeholderStyle: {
      type: String,
      default: 'color: #c0c4cc;',
    },
    // input|textarea是否显示边框
    border: {
      type: Boolean,
      default: false,
    },
    // 输入框的边框颜色
    borderColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0)',
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD',
    },
  },
  data() {
    return {
      startShow: false,
      endShow: false,
      defaultStartTime: '',
      defaultEndTime: '',
      defaultSelector: [0],
      limitStartTime: {},
      limitEndTime: {},
    };
  },
  watch: {
    rangeValue: {
      handler(val) {
        if (!val) {
          return;
        }
        this.defaultStartTime = this.dayFormat(val[0]);
        this.defaultEndTime = this.dayFormat(val[1]);
      },
      deep: true,
      immediate: true,
    },
  },
  onLoad() {},
  methods: {
    changeStatus(index) {
      this.current = index;
    },
    selStart() {
      if (this.disabled) return;
      this.startShow = true;
    },
    selEnd() {
      if (this.disabled) return;
      this.endShow = true;
    },
    confirmStart(e) {
      this.limitStartTime = e;
      this.defaultStartTime = this.dayFormat(this.formatTime(e));
      this.$emit('update:rangeValue', [this.defaultStartTime, this.defaultEndTime]);
    },
    confirmEnd(e) {
      this.limitEndTime = e;
      this.defaultEndTime = this.dayFormat(this.formatTime(e));
      this.$emit('update:rangeValue', [this.defaultStartTime, this.defaultEndTime]);
    },
    formatTime(result) {
      const date = this.reduceResult(['year', 'month', 'day'], result);
      const time = this.reduceResult(['hour', 'minute', 'second'], result);
      return [date.join('-'), time.join(':')].join(' ').trim();
    },
    dayFormat(time) {
      if (!time) {
        return '';
      }
      return dayjs(time).format(this.format);
    },
    reduceResult(typeArr, sourceObj) {
      return typeArr.reduce((prev, curr) => {
        if (sourceObj[curr]) {
          prev.push(sourceObj[curr]);
        }
        return prev;
      }, []);
    },
  },
};
</script>
